<template>
  <!-- 模块名:前端用户管理
  * 作者:孔德嘉
  * 创建时间:2023/03/13 14:01:16
   -->
  <div>
    <el-card class="box-card" style="width: 100%;">
      <!-- 搜索  新增按钮 -->
      <el-card shadow="always">
        <el-row>
          <el-col :span="22">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="text-align: left"
            >
              <el-form-item>
                <el-input
                  v-model="formInline.userName"
                  placeholder="用户名"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="formInline.userPhone"
                  placeholder="手机号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formInline.userType"
                  placeholder="请选择用户类型"
                >
                  <el-option
                    v-for="item in userType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formInline.userStatus"
                  placeholder="请选择用户状态"
                >
                  <el-option
                    v-for="item in userStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="color: #d7000f; border: 1px solid #d7000f"
                  @click="onSubmit"
                  plain
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2">
            <el-button
              @click="toAddUserInfo()"
              style="background-color: #d7000f; color: #fff"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="always" style="margin-top: 30px">
        <!-- 数据列表 -->
        <el-table :data="tableData" border style="width: 100%" max-height="470">
          <el-table-column prop="id" label="ID" min-width="6%" align="center">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
            min-width="10%"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userAvatar"
            label="头像"
            min-width="6%"
            align="center"
          >
            <template slot-scope="scope">
              <el-avatar fit="fill" :size="40">
                <img :src="`${prefix}${scope.row.userAvatar}`" />
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="userPhone"
            label="手机号"
             min-width="13%"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userType"
            label="类型"
             min-width="5%"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.userType == 0 ? "个人" : "企业" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="15%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userStatus"
            label="用户状态"
            min-width="10%"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 注销 -->
              <div v-if="scope.row.userStatus == 2">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #ff3b31;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">注销</span>
              </div>
              <!-- 正常 -->
              <div v-if="scope.row.userStatus == 0">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #4bd863;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">正常</span>
              </div>
              <!-- 封禁 -->
              <div v-if="scope.row.userStatus == 1">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #f59a23;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">已封禁</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="35%">
            <template slot-scope="scope">
              <el-button @click="toLookUserInfo(scope.row)" size="medium"
                >查看</el-button
              >
              <el-button
                @click="toUpdateUserInfo(scope.row)"
                style="background-color: #534947; color: #fff"
                size="medium"
                v-if="scope.row.userStatus == 1 || scope.row.userStatus == 0"
                >编辑</el-button
              >
              <el-button
                @click="toNoBanUser(scope.row)"
                style="background-color: #34262c; color: #fff"
                size="medium"
                v-if="scope.row.userStatus == 1"
                >取消封禁</el-button
              >
              <el-button
                @click="toBanUser(scope.row)"
                style="background-color: #34262c; color: #fff"
                size="medium"
                v-if="scope.row.userStatus == 0"
                >封禁</el-button
              >
              <el-button
                @click="toRemoveUser(scope.row)"
                style="background-color: #d7000f; color: #fff"
                size="medium"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 30px; text-align: center"
          @size-change="handleSizeChange"
          @current-change="upPage"
          :current-page="page.currentPage"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-card>
    </el-card>

    <!-- 查看页面 -->
    <!-- 查看用户信息 -->
    <el-dialog title="查看用户信息" :visible.sync="isOpenLookUserInfo">
      <el-row>
        <el-col :span="21">
          <el-descriptions title="用户信息" border>
            <el-descriptions-item label="ID">{{
              userInfoLook.id
            }}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{
              userInfoLook.userName
            }}</el-descriptions-item>
            <el-descriptions-item label="用户状态">
              <!-- 正常 -->
              <div v-if="userInfoLook.userStatus == 0">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #4bd863;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">正常</span>
              </div>
              <!-- 封禁 -->
              <div v-if="userInfoLook.userStatus == 1">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #f59a23;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">已封禁</span>
              </div>
              <!-- 注销 -->
              <div v-if="userInfoLook.userStatus == 2">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #ff3b31;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">注销</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="类型">
              <span v-if="userInfoLook.userType == 0">个人</span>
              <span v-else>企业</span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              userInfoLook.userPhone
            }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{
              userInfoLook.userEmail
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              userInfoLook.createTime
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              userInfoLook.userAddress
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="3">
          <!-- 头像 -->
          <el-descriptions
            style="margin-top: 41px"
            class="userAvatarLook"
            direction="vertical"
            border
          >
            <el-descriptions-item label="头像">
              <el-image
                style="width: 88%; height: 88%; margin: 0 auto"
                fit="fill"
                :src="`${prefix}${userInfoLook.userAvatar}`"
              ></el-image>
            </el-descriptions-item>
          </el-descriptions>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isOpenLookUserInfo = false">取 消</el-button>
            <el-button type="primary" @click="isOpenLookUserInfo = false"
              >确 定</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 编辑页面 -->
    <!-- 修改用户信息 -->
    <el-dialog title="编辑用户信息" :visible.sync="isOpenUpdateUserInfo">
      <el-form
        label-position="left"
        :rules="userInfoAddRules"
        ref="userInfoUpdate"
        :model="userInfoUpdate"
        label-width="100px"
        style="text-align: left"
        class="demo-ruleForm"
      >
        <el-form-item
          label="头像"
          style="display: inline-block; vertical-align: middle"
        >
          <el-upload
            class="avatar-uploader"
            action="http://101.43.223.224:8765/image/uploadImage"
            :show-file-list="false"
            :before-upload="beforeAvatarUploadUpdate"
            ref="upload"
            style="width: 40px; padding: 0; height: 40px"
          >
            <img
              v-if="imgUrl"
              :src="imgUrl"
              class="avatar"
              style="width: 40px; height: 40px"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width: 40px; height: 40px"
            ></i>
          </el-upload>
          <el-input v-model="imgUrl" v-show="false"></el-input>
        </el-form-item>
        <el-form-item
          label="用户id"
          style="
            display: inline-block;
            margin-left: 80px;
            vertical-align: middle;
          "
        >
          <el-input v-model="userInfoUpdate.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名称"
          style="display: inline-block"
          prop="userName"
        >
          <el-input v-model="userInfoUpdate.userName"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          style="display: inline-block; margin-left: 80px"
          prop="userPhone"
        >
          <el-input v-model="userInfoUpdate.userPhone"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          style="display: inline-block; width: 350px"
          prop="userEmail"
        >
          <el-input v-model="userInfoUpdate.userEmail"></el-input>
        </el-form-item>
        <el-form-item
          label="类型"
          style="display: inline-block; margin-left: 80px"
          prop="userType"
        >
          <el-radio-group v-model="userInfoUpdate.userType">
            <el-radio :label="0">个人</el-radio>
            <el-radio :label="1">企业</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="地址" prop="userAddress">
          <el-input v-model="userInfoUpdate.userAddress"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canUpClientUser">取 消</el-button>
        <el-button type="primary" @click="upClientUserById">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加页面 -->
    <!-- 添加用户信息 -->
    <el-dialog title="添加用户信息" :visible.sync="isOpenAddUserInfo">
      <el-form
        label-position="left"
        ref="userInfoAdd"
        :model="userInfoAdd"
        label-width="100px"
        :rules="userInfoAddRules"
        class="demo-ruleForm"
        style="text-align: left"
      >
        <el-form-item
          label="头像"
          style="display: inline-block; vertical-align: middle"
          label-width="60px"
          prop="headFileUrl"
        >
          <el-upload
            class="avatar-uploader"
            action="http://101.43.223.224:8765/image/uploadImage"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            style="width: 40px; height: 40px"
          >
            <img
              v-if="userInfoAdd.headFileUrl"
              :src="userInfoAdd.headFileUrl"
              class="avatar"
              style="width: 40px; height: 40px"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width: 40px; height: 40px"
            ></i>
          </el-upload>
          <el-input v-show="false" v-model="userInfoAdd.headFileUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名称"
          style="
            display: inline-block;
            margin-left: 30px;
            vertical-align: middle;
          "
          prop="userName"
        >
          <el-input v-model="userInfoAdd.userName"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          style="
            display: inline-block;
            margin-left: 30px;
            vertical-align: middle;
          "
          label-width="60px"
          prop="userPassword"
        >
          <el-input v-model="userInfoAdd.userPassword"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          style="display: inline-block"
          prop="userEmail"
        >
          <el-input v-model="userInfoAdd.userEmail"></el-input>
        </el-form-item>

        <el-form-item
          label="手机号"
          style="display: inline-block; margin-left: 120px"
          prop="userPhone"
        >
          <el-input v-model="userInfoAdd.userPhone"></el-input>
        </el-form-item>
        <el-form-item
          label="类型"
          style="display: inline-block"
          prop="userType"
        >
          <el-radio-group v-model="userInfoAdd.userType">
            <el-radio :label="0">个人</el-radio>
            <el-radio :label="1">企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="地址"
          style="display: inline-block; margin-left: 90px"
          prop="userAddress"
        >
          <el-input
            style="width: 150%"
            v-model="userInfoAdd.userAddress"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canSaveClientUser">取 消</el-button>
        <el-button type="primary" @click="saveClientUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'clientUser',
  data () {
    return {
      // 用户头像
      userAvatar: 0,
      // 图片路径
      imgUrl: '',
      // 图片前缀路径
      prefix: 'http://101.43.223.224:8765/image/getImageById?id=',
      // 验证规则
      userInfoAddRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        headFileUrl: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          {
            min: 6,
            message: '密码不低于11位数',
            trigger: 'blur'
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
            message: '密码中必须包含字母和数字'
          }
        ],
        userPhone: [
          { required: true, message: '请填写手机号码', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '手机号码不低于11位数',
            trigger: 'blur'
          },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码格式'
          }
        ],
        userEmail: [
          { required: true, message: '请填写邮箱地址', trigger: 'blur' },
          {
            pattern:
              /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/,
            message: '请输入正确的邮箱地址格式'
          }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        userAddress: [
          { required: true, message: '请填写地址', trigger: 'blur' }
        ]
      },
      // 分页条件
      page: {
        total: 0, // 总条数
        size: 10, // 每页条数
        currentPage: 1 // 当前页数
      },
      // 用户状态选择框
      userStatus: [
        {
          value: 0,
          label: '正常'
        },
        {
          value: 1,
          label: '封号'
        },
        {
          value: 2,
          label: '注销'
        }
      ],
      // 用户类型选择框
      userType: [
        {
          value: 0,
          label: '个人'
        },
        {
          value: 1,
          label: '企业'
        }
      ],
      // 添加 用户信息的 数据
      userInfoAdd: {
        userName: '',
        userPhone: '',
        userAvatar: '',
        userAddress: '',
        headFile: '',
        headFileUrl: '',
        userType: 0,
        userEmail: ''
      },
      // 修改 用户信息的 数据
      userInfoUpdate: {
        id: 0,
        userName: '',
        userPhone: '',
        userAvatar: '',
        headFile: '',
        useruserAddress: '',
        userEmail: '',
        commTime: ''
      },
      // 查看 用户信息的 数据
      userInfoLook: {
        id: 0,
        userName: '',
        userPhone: '',
        userAvatar: '',
        headFile: '',
        headFileUrl: '',
        useruserAddress: '',
        userEmail: '',
        userStatus: 1,
        createTime: ''
      },
      // 添加用户信息（弹窗）
      // 默认关闭
      isOpenAddUserInfo: false,
      // 修改用户信息（弹窗）
      // 默认关闭
      isOpenUpdateUserInfo: false,
      // 查看用户信息（弹窗）
      // 默认关闭
      isOpenLookUserInfo: false,
      // 搜索条件
      formInline: {
        userName: '',
        userPhone: '',
        userType: '',
        userStatus: ''
      },
      // 表格数据
      tableData: []
    }
  },
  mounted () {
    this.getClientUserList()
  },
  methods: {
    // 变换页数
    handleSizeChange (val) {
      // 修改当前显示条数
      this.page.size = val
      // 重新查询
      this.getClientUserList()
    },
    // 修改用户状态
    upUserStatus (id, userStatus, userStatusName) {
      // 修改请求
      this.$axios
        .put('/clientUser/upUserStatus', {
          id: id,
          userStatus: userStatus
        })
        .then((res) => {
          if (res.data.code === '200') {
            // 修改成功
            this.$message({
              type: 'success',
              message: userStatusName + '成功'
            })
            // 刷新页面
            this.getClientUserList()
          } else {
            this.$message.error(res.data.obj)
          }
        })
    },
    // 取消修改前端用户
    canUpClientUser () {
      // 清空form
      if (this.$refs.userInfoUpdate !== undefined) { this.$refs.userInfoUpdate.resetFields() }
      this.userInfoUpdate.userAvatar = this.userAvatar
      // 关闭弹窗
      this.isOpenUpdateUserInfo = false
    },
    // 修改前端用户
    upClientUserById () {
      this.$refs.userInfoUpdate.validate((valid) => {
        if (valid) {
          // 创建一个FormData对象\
          const formData = new FormData()
          formData.set('id', this.userInfoUpdate.id)
          formData.set('userAvatar', this.userInfoUpdate.userAvatar)
          formData.set('userName', this.userInfoUpdate.userName)
          formData.set('userPhone', this.userInfoUpdate.userPhone)
          // 判断文件是否上传
          if (this.userInfoUpdate.headFile != null) {
            formData.set(
              'headFile',
              this.userInfoUpdate.headFile,
              this.userInfoUpdate.headFile.name
            )
          }
          formData.set('userAddress', this.userInfoUpdate.userAddress)
          formData.set('userType', this.userInfoUpdate.userType)
          formData.set('userEmail', this.userInfoUpdate.userEmail)
          this.$axios
            .put('/clientUser/upClientUserById', formData)
            .then((res) => {
              if (res.data.code === '200') {
                // 将查询的信息
                this.$message.success('修改成功')
                // 关闭
                this.isOpenUpdateUserInfo = false
                // 刷新页面
                this.getClientUserList()
              } else {
                this.$message.error(res.data.obj)
              }
            })
        } else {
          return false
        }
      })
    },
    // 取消添加 前端用户
    canSaveClientUser () {
      // 关闭弹窗
      this.isOpenAddUserInfo = false
      // 清空form
      this.$refs.userInfoAdd.resetFields()
    },
    // 添加前端用户
    saveClientUser () {
      this.$refs.userInfoAdd.validate((valid) => {
        if (valid) {
          // 创建一个FormData对象\
          const formData = new FormData()
          formData.set('userName', this.userInfoAdd.userName)
          formData.set('userPhone', this.userInfoAdd.userPhone)
          // 判断文件是否上传
          if (this.userInfoAdd.headFile != null) {
            formData.set(
              'headFile',
              this.userInfoAdd.headFile,
              this.userInfoAdd.headFile.name
            )
          }
          formData.set('userPassword', this.userInfoAdd.userPassword)
          formData.set('userAddress', this.userInfoAdd.userAddress)
          formData.set('userType', this.userInfoAdd.userType)
          formData.set('userEmail', this.userInfoAdd.userEmail)
          this.$axios
            .post('/clientUser/saveClientUser', formData)
            .then((res) => {
              if (res.data.code === '200') {
                // 将查询的信息
                this.$message.success('添加成功')
                // 刷新页面
                this.getClientUserList()
                // 关闭
                this.isOpenAddUserInfo = false
              } else {
                this.$message.error(res.data.obj)
              }
            })
        } else {
          return false
        }
      })
    },
    // 更改页码
    upPage (val) {
      this.page.currentPage = val
      // 重新查询
      this.getClientUserList()
    },
    // 获取全部用户信息
    getClientUserList () {
      this.$axios
        .get('/clientUser/getClientUserList', {
          params: {
            userName: this.formInline.userName,
            userPhone: this.formInline.userPhone,
            userType: this.formInline.userType,
            userStatus: this.formInline.userStatus,
            pageNum: this.page.currentPage,
            pageSize: this.page.size
          }
        })
        .then((res) => {
          if (res.data.code === '200') {
            // 将查询的信息给对象
            this.tableData = res.data.obj.content
            // 赋值分页信息
            this.page.total = res.data.obj.total
          } else {
            this.$message.error(res.data.obj)
          }
        })
    },
    // 打开添加用户信息窗口
    toAddUserInfo (row) {
      // 显示窗口
      this.isOpenAddUserInfo = true
    },
    // 打开修改用户信息窗口
    toUpdateUserInfo (row) {
      // 显示窗口
      this.isOpenUpdateUserInfo = true
      // 把row只给updateUserInfo
      this.userInfoUpdate = row
      // 图片id
      this.imgUrl = `${this.prefix}${row.userAvatar}`
    },
    // 修改上传之前判断
    beforeAvatarUploadUpdate (file) {
      this.$refs.upload.clearFiles()
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      this.imgUrl = null
      // 提交给图片路径
      this.imgUrl = URL.createObjectURL(file)
      // 提交文件
      this.userInfoUpdate.headFile = file
      this.userAvatar = this.userInfoUpdate.userAvatar
      this.userInfoUpdate.userAvatar = 0
      return false
    },
    // 添加上传之前判断
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      // 提交给图片路径
      this.userInfoAdd.headFileUrl = URL.createObjectURL(file)
      // 提交文件
      this.userInfoAdd.headFile = file
      return false
    },
    // 删除用户
    toRemoveUser (row) {
      this.$confirm('此操作将删除' + row.userName + '用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete('/clientUser/removeUserById/' + row.id)
            .then((res) => {
              if (res.data.code === '200') {
                // 将查询的信息
                this.$message.success('删除成功')
                // 刷新页面
                this.getClientUserList()
              } else {
                this.$message.error(res.data.obj)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 取消封禁用户
    toNoBanUser (row) {
      this.$confirm(
        '此操作将取消封禁' + row.userName + '用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          // 调用修改用户状态方法
          // 取消封禁状态为0
          this.upUserStatus(row.id, 0, '取消封禁')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消，取消封禁'
          })
        })
    },
    // 封禁用户
    toBanUser (row) {
      this.$confirm('此操作将封禁' + row.userName + '用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 调用修改用户状态方法
          // 封禁状态为1
          this.upUserStatus(row.id, 1, '封禁')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消封禁'
          })
        })
    },
    // 打开查看用户信息窗口
    toLookUserInfo (row) {
      // 显示窗口
      this.isOpenLookUserInfo = true
      // 把row只给updateRealNameForm
      this.userInfoLook = row
    },
    onSubmit () {
      this.getClientUserList()
    }
  }
}
</script>

<style>
/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d7000f;
  color: #fff;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #d7000f;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #d7000f;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #d7000f;
  color: #fff;
}
/*带背景的分页按钮背景色end*/

/*不带背景的分页按钮背景色begin*/
.el-pager li.active {
  color: #d7000f;
  cursor: default;
}
.el-pagination .el-pager li:hover {
  color: #d7000f;
}
.el-pagination .el-pager li:not(.disabled):hover {
  color: #d7000f;
}
/*不带背景的分页按钮背景色end*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  font-size: 12px;
  color: #999999;
  font-weight: 400;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  /**分页被选中的背景颜色 */
  background-color: #d7000f;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  /**分页 鼠标移入被 选中的字体颜色 */
  color: #d7000f;
}
.el-button--primary {
  /**修改实名认证页面 确定按钮 */
  color: #fff;
  background-color: #d7000f;
  border-color: #d7000f;
}
.el-button--primary:focus,
.el-button--primary:hover {
  /**修改实名认证页面 确定按钮 */
  background: #e96a72;
  border-color: #e96a72;
  color: #fff;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  /**页面 最上方 输入框 */
  border-color: #d7000f;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  /**页面 最上方 选择框 */
  border-color: #d7000f;
}
.el-select-dropdown__item.selected {
  /**页面 最上方 选择框 中被选中的选项 */
  color: #d7000f;
}
.el-select .el-input__inner:focus {
  /**页面 最上方 选择框 */
  border-color: #d7000f;
}
/**图片上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-radio__input.is-checked .el-radio__inner {
  /** 修改 用户信息 单选框 */
  border-color: #d7000f;
  background: #d7000f;
}
.el-radio__input.is-checked + .el-radio__label {
  /** 修改 用户信息 单选框 文字 */
  color: #d7000f;
}
.el-radio__inner:hover {
  /** 修改 用户信息 单选框 */
  border-color: #d7000f;
}
.el-button:focus,
.el-button:hover {
  /**取消修改*/
  color: #d7000f;
  border-color: #c07676;
  background-color: #ffecec;
}
.avatar-uploader-icon {
  /**图片上传*/
  line-height: 40px;
}
.avatar-uploader .el-upload:hover {
  /**图片上传*/
  border-color: #d7000f;
}
.userAvatarLook .el-descriptions-row:last-child {
  /**查看  图片*/
  height: 90px;
}
.userAvatarLook
  .el-descriptions-row:last-child
  .el-descriptions-item__cell:last-child {
  /**查看  图片*/
  height: 90px;
}
</style>
